<template>
  <h3 :style="{ color: titleInfo.color }">{{ titleInfo.value }}</h3>
  <input type="text" v-model="todoName" @keydown.enter="addTodo(newTodo(todoName))" />
  <ul>
    <li v-for="t in todoList" :key="t.id">
      <span>· {{ t.name }}</span>
      <input type="checkbox" :checked="t.completed" />
    </li>
  </ul>
</template>

<script lang="ts" setup>
import { defineProps, ref } from 'vue'
import type { PropType } from 'vue'
import type { TitleInfo, Todo } from '@/types'
defineProps({
  titleInfo: {
    type: Object as PropType<TitleInfo>,
    required: true,
  },
})
const todoName = ref('')
const todoList = ref([] as Todo[])
todoList.value.push({
  id: 1,
  name: 'Hello Vue3 + TS',
  completed: false,
})
function newTodo(todoName: string): Todo {
  return {
    id: Date.now(),
    name: todoName,
    completed: false,
  }
}

function addTodo(todo: Todo): void {
  todoList.value.push(todo)
}
</script>

<style scoped lang="scss">
h3 {
  padding: 5px 10px;
  text-align: center;
}

ul {
  margin: 10px;

  li {
    width: 200px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
